<template>
<div>
<!--html布局-->
<!--工具类-->


  <!--内容-->
  <div>
    <Tabs v-model="editMode.selectedTab">
      <Button type="success" icon="ios-copy" @click="saveSingleVersion" class="tiy_btn" slot="extra" v-show="editMode.isEdit">保存</Button>
      <Button type="primary" icon="ios-copy" @click="editModal" class="tiy_btn" ghost slot="extra">{{editMode.btnName}}</Button>
      <TabPane label="Android" name="Android" icon="logo-android" :disabled="androidDisablse">
        <div>
          <Form :model="android"   :label-width="130"
                ref="androidForm"  :rules="param.versionRule"
                style="margin:2rem 0px 1rem 0px">
            <Row>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="最新版本号 :" prop="versioncode">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{android.versioncode}}</p>
                    <InputNumber v-show="editMode.isEdit" v-model.trim="android.versioncode" placeholder="请输入" class="form_step"></InputNumber>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="下载地址 :" prop="url">
                  <div class="form_value" style="max-width: 40em">
                    <p v-show="!editMode.isEdit">{{android.url}}</p>
                    <Input v-show="editMode.isEdit" v-model.trim="android.url" placeholder="请输入" class=""></Input>
                  </div>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="最低兼容版本号:" prop="compatibleVersionCode">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{android.compatibleVersionCode}}</p>
                    <InputNumber v-show="editMode.isEdit" v-model.trim="android.compatibleVersionCode" placeholder="请输入" class="form_step"></InputNumber>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="强制更新 :">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{android.isForce == 0 ? '否': '是'}}</p>
                    <i-switch v-show="editMode.isEdit" v-model="android.isForce"  true-value=1>是否强制更新</i-switch>
                  </div>
                </FormItem>
              </i-col>
            </Row>
            <FormItem label="更新内容 :">
              <div class="form_value" style="max-width: 60em;">
                <p v-show="!editMode.isEdit">{{android.description}}</p>
                <Input v-show="editMode.isEdit" v-model.trim="android.description" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" class="form_step"></Input>
              </div>
            </FormItem>
            <FormItem label="html富文本内容 :">
              <div class="form_value" style="max-width: 80em;" v-if="!this.$yMobile()">
                <div style="background: #f9f9f9;max-width: 80% !important; !important;padding: 3em" v-html="android.htmlContent" v-show="!editMode.isEdit"></div>
                <Input v-show="editMode.isEdit" v-model.trim="android.htmlContent" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" class="form_step"></Input>
              </div>
            </FormItem>
            <div class="form_value" style="max-width: 80em;" v-if="this.$yMobile()">
              <div style="background: #f9f9f9; max-width: 100% !important; !important;padding: 3em" v-html="android.htmlContent" v-show="!editMode.isEdit"></div>
              <Input v-show="editMode.isEdit" v-model.trim="android.htmlContent" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" style="width: 100%;"></Input>
            </div>
          </Form>
        </div>
      </TabPane>
      <TabPane label="IOS" name="IOS" icon="logo-apple" :disabled="iosDisablse">
        <div>
          <Form :model="ios"   :label-width="130"
                ref="iosForm"  :rules="param.versionRule"
                style="margin:2rem 0px 1rem 0px">
            <Row>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="最新版本号 :" prop="versioncode">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{ios.versioncode}}</p>
                    <InputNumber v-show="editMode.isEdit" v-model.trim="ios.versioncode" placeholder="请输入" class="form_step"></InputNumber>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="下载地址 :" prop="url">
                  <div class="form_value" style="max-width: 40em">
                    <p v-show="!editMode.isEdit">{{ios.url}}</p>
                    <Input v-show="editMode.isEdit" v-model.trim="ios.url" placeholder="请输入" class=""></Input>
                  </div>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="最低兼容版本号:" prop="compatibleVersionCode">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{ios.compatibleVersionCode}}</p>
                    <InputNumber v-show="editMode.isEdit" v-model.trim="ios.compatibleVersionCode" placeholder="请输入" class="form_step"></InputNumber>
                  </div>
                </FormItem>
              </i-col>
              <i-col span="8" :xs="{span: 24}" :sm="{span: 8}">
                <FormItem label="强制更新 :">
                  <div class="form_value">
                    <p v-show="!editMode.isEdit">{{ios.isForce == 0 ? '否': '是'}}</p>
                    <i-switch v-show="editMode.isEdit" v-model="ios.isForce" true-value=1>是否强制更新</i-switch>
                  </div>
                </FormItem>
              </i-col>
            </Row>
            <FormItem label="更新内容 :">
              <div class="form_value" style="max-width: 60em;">
                <p v-show="!editMode.isEdit">{{ios.description}}</p>
                <Input v-show="editMode.isEdit" v-model.trim="ios.description" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" class="form_step"></Input>
              </div>
            </FormItem>
            <FormItem label="html富文本内容 :">
              <div class="form_value" style="max-width: 80em;" v-if="!this.$yMobile()">
                <div style="background: #f9f9f9;max-width: 80% !important; !important;padding: 3em" v-html="ios.htmlContent" v-show="!editMode.isEdit"></div>
                <Input v-show="editMode.isEdit" v-model.trim="ios.htmlContent" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" class="form_step"></Input>
              </div>
            </FormItem>
            <div class="form_value" style="max-width: 80em;" v-if="this.$yMobile()">
              <div style="background: #f9f9f9;max-width: 100% !important; !important;padding: 3em" v-html="ios.htmlContent" v-show="!editMode.isEdit"></div>
              <Input v-show="editMode.isEdit" v-model.trim="ios.htmlContent" type="textarea" placeholder="请输入" :autosize="{minRows: 3}" style="width: 100%;"></Input>
            </div>
          </Form>
        </div>
      </TabPane>
    </Tabs>
  </div>

</div>
</template>
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/appVersion/app_version_data"
  import {
    init, saveVersion,
    webData,
  } from "./js/appVersion/app_version_fun"

  export default {
    components: {ICol},
    data() {
      return {
        param:tiyData.tParam,
        tStatus:tiyData.tStatus,

        android: tiyData.tData.android,
        ios: tiyData.tData.ios,
        yunPath: this.$store.getters.imgPrefix,
        editMode:tiyData.tStatus.editMode,
        isOnlyOpened:false,
        isCountriesChanged:false,

        androidDisablse:false,
        iosDisablse:false,

      }
    },
    computed: {

      isEditable(){
        return this.$authority('OTHER-1-101')
      }
    },
    methods: {

      saveSingleVersion(){
        saveVersion(this,tiyData)
      },
      editModal(){
        if(tiyData.tStatus.editMode.isEdit){
          tiyData.tStatus.editMode.btnName = "编辑"
          this.iosDisablse = false;
          this.androidDisablse = false;
        }else {
          tiyData.tStatus.editMode.btnName = "取消编辑"
          if(tiyData.tStatus.editMode.selectedTab == "Android"){
            this.iosDisablse = true;
            this.androidDisablse = false;
          }else {
            this.iosDisablse = false;
            this.androidDisablse = true;
          }
        }
        tiyData.tStatus.editMode.isEdit = !tiyData.tStatus.editMode.isEdit
      }
    },
    mounted() {
      init(this, tiyData);
      webData(this, tiyData);
    }
  }
</script>

<!--javascript 代码-->

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";


  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }

  }

  .form_value{
    text-align: left;
    max-width: 20em;
  }

  .form_step {
    width:80%;
  }

  .key{
    .tiy_key;
    text-align: right;
  }

  .countrySelected{
    background-color:#EDE7F6
  }

</style>

